<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手机充电效果</title>
  </head>
  <style>
    .buttonGroup {
      width: 300px;
      display: flex;
      justify-content: space-around;
      margin-bottom: 20px;
    }

    .iphone {
      width: 300px;
      height: 700px;
      border: 1px solid;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .effect {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 1px solid;
      position: relative;
      overflow: hidden;
    }

    .water {
      width: 100%;
      height: 0;
      background-color: #007bff;
      position: absolute;
      bottom: 0;
      transition: height 0.5s ease;
      text-align: center;
      color: skyblue;
    }

    .drop {
      width: 10px;
      height: 10px;
      background-color: #007bff;
      border-radius: 50%;
      position: absolute;
      top: 100px;
      left: 45%;
      transform: translateX(50%);
      animation: dropFall 0.8s ease forwards;
    }

    @keyframes dropFall {
      0% {
        top: 100%;
      }

      100% {
        top: 65%;
      }
    }

    .plug {
      width: 50px;
      height: 50px;
      background-color: #000;
      position: absolute;
      bottom: -25px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 50%;
      display: none;
    }
  </style>

  <body>
    <div class="buttonGroup">
      <button onclick="Charging()">充电</button>
      <button onclick="StopCharging()">取消</button>
      <button onclick="reset()">重置</button>
    </div>
    <div class="iphone">
      <div class="effect">
        <div class="water">1%</div>
        <div class="plug"></div>
      </div>
    </div>
  </body>

  <script>
    let chargingInterval
    let waterLevel = 0

    // 开始充电
    function Charging() {
      if (!chargingInterval) {
        chargingInterval = setInterval(() => {
          // 创建水滴元素
          const drop = document.createElement('div')
          drop.classList.add('drop')
          document.querySelector('.iphone').appendChild(drop)

          // 模拟水滴消失
          setTimeout(() => {
            drop.remove()
          }, 1000)

          // 增加水位
          waterLevel += 1
          if (waterLevel > 100) {
            waterLevel = 100
            clearInterval(chargingInterval)
            chargingInterval = null
          }
          const water = document.querySelector('.water')
          water.style.height = `${waterLevel}%`
          water.textContent = `${waterLevel}%`
        }, 500)
      }
    }

    // 停止充电
    function StopCharging() {
      if (chargingInterval) {
        clearInterval(chargingInterval)
        chargingInterval = null
      }
    }

    // 重置状态
    function reset() {
      StopCharging()
      waterLevel = 0
      const water = document.querySelector('.water')
      water.style.height = `0%`
      water.textContent = `0%`
    }
  </script>
</html>
